<template>
	<div>
		<van-nav-bar
			title="发布拓展阅读"
			left-text="返回"
			left-arrow
			@click-left="onClickLeft"
		/>
		<div style="padding-top: 10px; padding-bottom: 60px">
			<el-form
				ref="ruleFormRef"
				:model="form"
				:rules="rules"
				label-width="80px"
			>
				<el-form-item label="标题" prop="title">
					<el-input v-model="form.title" placeholder="请输入标题" />
				</el-form-item>
				<el-form-item label="类型" prop="extendArticleTypeId">
					<el-select
						v-model="form.extendArticleTypeId"
						class="m-2"
						placeholder="请选择类型"
					>
						<el-option
							v-for="item in typeList"
							:key="item.id"
							:label="item.title"
							:value="item.id"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="简介" prop="desc">
					<el-input v-model="form.desc" type="textarea" :rows="4" />
				</el-form-item>
				<el-form-item label="内容" prop="content">
					<div style="border: 1px solid #ccc; height: 500px">
						<Toolbar
							style="border-bottom: 1px solid #ccc"
							:editor="editorRef"
							:defaultConfig="toolbarConfig"
							mode="simple"
						/>
						<Editor
							style="height: 320px; overflow-y: hidden"
							v-model="form.content"
							:defaultConfig="editorConfig"
							mode="simple"
							@onCreated="handleCreated"
						/>
					</div>
				</el-form-item>
				<el-form-item label="封面" prop="cover">
					<el-upload
						class="avatar-uploader"
						action="http://localhost:3000/api/extendArticle/upload"
						:show-file-list="false"
						:on-success="handleAvatarSuccess"
					>
						<img
							v-if="form.cover"
							:src="'http://localhost:3000/' + form.cover"
							class="avatar"
						/>
						<el-icon v-else class="avatar-uploader-icon"
							><Plus
						/></el-icon>
					</el-upload>
				</el-form-item>
				<el-form-item label="pdf文件" prop="file">
					<el-upload
						class="avatar-uploader"
						action="http://localhost:3000/api/extendArticle/upload"
						:show-file-list="false"
						:on-success="handleFileSuccess"
						accept=".pdf"
					>
						<el-button type="primary">点击上传</el-button>
					</el-upload>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm(ruleFormRef)"
						>确定
					</el-button>
					<el-button @click="resetForm(ruleFormRef)">取消</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script setup>
import { onMounted, reactive, ref, shallowRef } from "vue";
import { useRouter } from "vue-router";
import { add, del, list, update } from "@/api/extendArticle";
import { list as getTypeData } from "@/api/extendArticleType";

import { ElMessage, dayjs } from "element-plus";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

const router = useRouter();
const ruleFormRef = ref();
const toolbarConfig = {};
const editorConfig = {
	placeholder: "请输入简介...",
	MENU_CONF: {
		uploadImage: {
			server: "http://localhost:3000/api/extendArticle/upload",
			"tenant-id": "1",
			fieldName: "file",
			customInsert(res, insertFn) {
				if (res.code === 200) {
					const api = "http://localhost:3000/";
					insertFn(api + res.result, null, api + res.result);
				}
			},
		},
	},
};
const editorRef = shallowRef();
const typeList = ref([]);

const form = reactive({
	title: "",
	content: "",
	desc: "",
	extendArticleTypeId: "",
	file: "",
	cover: "",
	status: 0,
	id: 0,
});

const rules = reactive({
	title: [{ required: true, message: "请输入标题", trigger: "blur" }],
	content: [{ required: true, message: "请输入内容", trigger: "blur" }],
	desc: [{ required: true, message: "请输入简介", trigger: "blur" }],
	extendArticleTypeId: [
		{ required: true, message: "请选择类型", trigger: "blur" },
	],
	cover: [{ required: true, message: "请上传封面", trigger: "blur" }],
	file: [{ required: true, message: "请上传pdf文件", trigger: "blur" }],
});

onMounted(() => {
	handleGetTypeData();
});

const handleCreated = editor => {
	editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleGetTypeData = async () => {
	try {
		const res = await getTypeData();
		typeList.value = res.result.list;
	} catch (err) {
		console.error(err);
	}
};

const submitForm = async formEl => {
	if (!formEl) return;
	await formEl.validate(async (valid, fields) => {
		if (valid) {
			await add({
				title: form.title,
				content: form.content,
				desc: form.desc,
				extendArticleTypeId: form.extendArticleTypeId,
				cover: form.cover,
				status: form.status,
			});
			ElMessage.success("添加成功");
			onClickLeft();
		}
	});
};

const resetForm = formEl => {
	if (!formEl) return;
	formEl.resetFields();
};

const handleAvatarSuccess = response => {
	form.cover = response.result;
};
const handleFileSuccess = response => {
	form.file = response.result;
	ElMessage.success("上传成功");
};
const handleOpenFile = row => {
	window.open("http://localhost:3000/" + row.file);
};

const onClickLeft = () => {
	router.back();
};
</script>

<style scoped>
.avatar-uploader .avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
</style>
